<template>
	<view class="page">
		<view style="background-color:#f3f5f7;">
			<view class="searchPP">
				<image @click="goBack" style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem" src="@/style/image/cargo/leftarow.jpg"
				 alt="" />
				<view class="searchP">
					<u-search placeholder="请输入网店名称或虚拟码" shape="round" :show-action="false" @search="searchVirtual"></u-search>
					<u-icon name="scan" @click="overScan"></u-icon>
				</view>
			</view>
			<view>
				<view class="inv-h-w" style="background-color: #fff;">
					<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)"><text>已激活</text></view>
					<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)"><text>未激活</text></view>
				</view>
				<view class="active" v-for="(item, index) in dataList" :key="index">
					<view class="title">
						<view class="left">
							<text>虚拟码:</text>
							<text>{{item.sn}}</text>
						</view>
						<text style="color: #02AF74;" :class="item.activateType=='ACTIVATE'?'green':'red'">{{item.activateType=='ACTIVATE'?'已激活':'未激活'}}</text>
					</view>
					<view class="tabA">
						<text>绑定底座</text>
						<text>{{getEquipList(item.snList)}}</text>
					</view>
					<view class="tabB">
						<text>宝设备量</text>
						<text>{{item.powerBankCount}}</text>
					</view>
					<view style="text-align: center;">
						<u-button @click="addWD(item)" type="success" :plain="true" size="mini">{{item.activateType=='ACTIVATE'?'查看详情':'绑定网点'}}</u-button>
					</view>
				</view>
				<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script lang="js">
	import uniLoadMore from '../../loadMore/uni-load-more.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'
	import {
		deviceVirtualList
	} from "../../../utils/uniApi";
	export default {
		components: {
			'uniLoadMore':uniLoadMore,
			uniCard
		},
		data() {
			return {
				keyword:'',
				Inv: 0, //tab切换至  0激活   1未激活
				pageN: 1,//分页的页数
				status:'more',
				contentText:{
					contentdown: '下拉或点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				continueTypes : true,
				
				dataList: [], //数据list
			}
		},
		onShow() {
			this.findDeviceVirtualList(this.pageN)
		},
		onHide(){
			uni.hideLoading();
		},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
			    setTimeout(function () {
					uni.redirectTo({
						url: "../../../pages/item/virtualCode/virtualCode",
					});
					uni.stopPullDownRefresh();
			    }, 1000);
			},
			//上拉加载更多
			onReachBottom() {
				if(!this.continueTypes){
				  	return
				}
			    this.pageN = this.pageN + 1;
			    this.findDeviceVirtualList(this.pageN)
			},
			clickLoadMore(){
				this.onReachBottom()
			},
			
			//tab切换
			changeTab(Index) {
				this.Inv = Index;
				this.pageN = 1
				this.findDeviceVirtualList(this.pageN)
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//搜索框
			searchVirtual(value){
				 this.keyword = value
				 this.pageN = 1
				 console.log('输出搜索：'+value)
				 this.findDeviceVirtualList(this.pageN)
			},
			//未激活   添加商户和网点
			addWD(item) {
				if(item.activateType=='ACTIVATE'){
					uni.navigateTo({
						url: "./management?virtual=" + encodeURIComponent(JSON.stringify(item)),
					});
				}else if(item.activateType=='UN_ACTIVATE'){
					uni.navigateTo({
						url: "./virtualShop?virtual=" + encodeURIComponent(JSON.stringify(item)),
					});
				}
			},
			

			//获取虚拟码列表
			findDeviceVirtualList(page) {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					primaryKey:this.keyword,
					page: page,
					size: '10',
					activateType: this.Inv == 0 ? 'ACTIVATE' : 'UN_ACTIVATE',
				};
				deviceVirtualList(params).then((res) => {
					// console.log("++++++++虚拟码:", JSON.stringify(res));
					uni.hideLoading();
					if (res.data.statusCode == 200) {
						if (res.data.result.pages > res.data.result.current) {
						  this.status = "more";
						  this.continueTypes = true;
						} else {
						  this.status = "noMore";
						  this.continueTypes = false;
						}
						if (this.dataList.length>0 && page == 1) {
							this.dataList = [];
						}
						this.dataList = this.dataList.concat(res.data.result.records)
					} else {
						uni.showToast({
							title: "请求失败",
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			//二维码扫描设备编号
			overScan(){
				var that = this;
				uni.scanCode({
					success: function(res) {
						this.deviceSn = res.result
					},
				});
			},
			//底座字符拼接
			getEquipList(list) {
				var str = ''
				list.filter((itemd, indexd) => {
					if (str == '') {
						str = itemd
					} else {
						str = str + ',' + itemd
					}
				})
				return str
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
			background-color: #F3F5F7;
			height: 100%;
		}
	.searchPP {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 14px 25px;
		background-color: #FFFFFF;

		.searchP {
			width: 100%;
			position: relative;

			.u-icon {
				width: 1rem;
				height: 1rem;
				position: absolute;
				top: 0.3rem;
				right: 0.8rem;
			}

			.u-search {
				width: 100%;
			}
		}
	}
	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
		border-top: 1px solid #E5E5E5FF;
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #000;
		height: 100upx;
		line-height: 100upx;
	}

	.btn {
		text-align: center;
	}

	.inv-h-se {
		color: #2dbc8b;

		text {
			display: block;
			width: 5rem;
			height: 98%;
			margin: 0 auto;
			border-bottom: 2px solid #2dbc8b;
		}
	}

	.page {
		height: 100%;
		background-color: #F3F5F7;
	}
	.active,
	.unactive {
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #E5E5E5;
			padding-bottom: 1em;
		}

		.tabA {
			margin: 1em 0;
		}

		.tabB {
			padding-bottom: 1em;
			margin-bottom: 1em;
			border-bottom: 1px solid #E5E5E5;
		}

	}
	.green{
		color: #02AF74;
	}
	.red{
		color: #FC0101 !important;
	}
	.u-btn--success--plain[data-v-6e15e680] {
		background-color: #fff !important;
	}

	.tabA,
	.tabB {
		display: flex;
		// line-height: 1.4rem;
		justify-content: space-between;
		color: #a0a0a0;
	}
</style>
